
@import "./assets/scss/bootstrap.scss";  
@import "~antd/dist/antd.min.css"; 
@import '~font-awesome/css/font-awesome.min.css';

$navbarBgColor: #3f4b57;
$navbarBgHoverColor: #303d47;

body{
    color:#666;
    font-size: 14px;
    a{
      &:focus{
        text-decoration: none;
      }
      text-decoration: none;
      &.active{
        background-color: $navbarBgHoverColor;
      }
    }
  
}
.layout-warpper{
  height: 100%;
}
.main{
  min-height:1024px;
}
.main-nav {
  background: $navbarBgColor;
  box-shadow: 0 2px 5px 0 rgba(248, 56, 56, 0.24);
}

.bd-navbar {
  .navbar-nav {
    @include media-breakpoint-down("sm", $grid-breakpoints) {
      flex-direction: column !important;
    }
    > li {
      display: flex;
      align-items: center;
      @include media-breakpoint-down("sm", $grid-breakpoints) {
        > a {
          flex:1;
          
        }
      }
      > a {
        cursor: pointer;
        color: inherit;
        padding: 0.6rem 0.8rem;
        &:hover {
          background-color: $navbarBgHoverColor;
        }
      }
    }
  }
  .collapse {
    @include media-breakpoint-down("sm", $grid-breakpoints) {
      flex-direction: column;
    }
  }
}
.react-echart{
  width:100%;
  height:400px;
}
table thead th,table tbody td{
   text-align: center !important;
}
.exception-404{
  min-height: 500px;
  background: url('assets/images/404.svg') no-repeat center / contain
}
.loading-container{
   position: fixed;
   top:0;
   left:0;
   right: 0;
   bottom:0;
   background: rgba(0,0,0,0.05);
}
// 这是login 和register 的通用样式
.card{
  box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
}
.login-panel {
  width: 350px;
  padding: 50px 20px;
  margin: 30px auto 30px auto;
  .col-12 {
    padding: 25px 40px;
  }
}

.login-container{
  background: url('assets/images/login.svg') center 110px / 100%;
 
}

.inputfiled {
  position: relative;
  flex: 1;
  .input-text {
    border-width: 0px;
    background: transparent no-repeat;
    background-image: linear-gradient(90deg, #00b4cf, #00b4cf),
      linear-gradient(90deg, #bdbdbd, #bdbdbd);
    background-position: 50% 100%, 50% 100%;
    background-size: 0 2px, 100% 2px;
    transition: background-size 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
    outline: medium none;
    color: #00b4cf;
    padding: 2px;
    &.error{
    
      & + label{
        color: #b7302c!important;
      }
    }
    &:focus {
      border-width: 0;
      background-size: 100% 2px, 100% 1px;
      outline: none;
      padding-bottom: 2px;
      & ~ label{
          top: -20px;
          font-size: 12px;
          color: #00b4cf;

      }
    }
    &:-webkit-autofill ~ label {
      top:-20px;
      font-size:12px;
      color:#00b4cf;
    }
    &.ui-state-filled ~ label{
      top: -20px;
          font-size: 12px;
          color: #00b4cf;
    }
  }
  label {
    position: absolute;
    left: 5px;
    top: 1px;
    color: #999;
    transition: .3s ease all;
    pointer-events: none;
  }
}

